<template>
    <h-section collapse title="业务需求">
        <div :class="['workbench-require-card-item', 'disabled-item']" v-for="item of list" :key="item.id" style="background: #fff">
            <flexbox align="flex-start">
                <div style="flex: 1; overflow: hidden">
                    <flexbox justify="space-between">
                        <flexbox style="flex: 1; margin-left: 20px; overflow: hidden">
                            <HToolTip :title="item.requireName">
                                <span style="color: #172b4d; margin-left: 4px">{{ versionDetail.pmpProductDetailDTO.systemName }}</span>
                            </HToolTip>
                            <span class="margin-l-8 primary-color">{{ item.requestNumber }}</span>
                        </flexbox>

                        <a-tag v-if="item.repairVersion">
                            {{ item.repairVersion }}
                        </a-tag>
                    </flexbox>
                    <flexbox jusitfy="space-between" style="overflow: hidden">
                        <HToolTip :title="item.requireName">
                            <span style="color: #172b4d; margin-left: 24px">{{ item.requestName }}</span>
                        </HToolTip>
                    </flexbox>
                </div>
                <a-tooltip title="取消关联" v-if="!disabled">
                    <div @click.stop="handleRemove(item)" class="delete-cont">
                        <my-icon type="icondelete" />
                    </div>
                </a-tooltip>
            </flexbox>
        </div>
    </h-section>
</template>

<script lang="ts">
import { message } from 'ant-design-vue';
import api from '@/api';
import { HToolTip } from '@/components';
import { defineComponent, reactive, toRefs, getCurrentInstance } from 'vue';
export default defineComponent({
    components: {
        HToolTip
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        versionDetail: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const state = reactive<any>({});
        const instance: any = getCurrentInstance();
        //移除关联
        const handleRemove = async (item) => {
            const query = {
                businessId: item.id,
                versionId: props.versionDetail.id,
                type: 'delete'
            };
            const { success, errorMsg } = await api.pmpRequestInfoModel.signpostBVSave(query);
            if (success) {
                emit('success', true);
                if (item.signpostId) {
                    instance.proxy.$mitt.emit('taskRequireList-subversionSystemItem-refreshTaskList', {}, true);
                } else {
                    instance.proxy.$mitt.emit('unVersionTaskRequireList-subversionSystemItem-refreshTaskList', {}, true);
                }
            } else {
                message.error(errorMsg);
            }
        };
        return {
            ...toRefs(state),
            handleRemove
        };
    }
});
</script>

<style scoped lang="less">
@import '../../../LeftSide/styles/common.less';
::v-deep(.ant-badge-status-text) {
    margin-left: 0 !important;
}
</style>